<template>

  <div small-bg>
    <dv-decoration5 :dur="2" style="width:750px;height:40px; margin: auto; padding-top: 10px;" />
    <dv-decoration7 style="width:750px;height:40px; margin: auto; padding-top: 10px;">
      <div color-white font-300>
        <h1>园区智慧物流服务中心</h1>
      </div>
    </dv-decoration7>
  </div>


   <div class="weather-container">
    <div v-if="loading" class="loading">加载中...</div>
    <div v-else-if="error" class="error">错误: {{ error }}</div>
    <div v-else class="weather-card">
      <div class="location">
        <i class="icon-location"></i>
        {{ weatherData?.cityInfo?.city }} {{ weatherData?.cityInfo?.parent }}
      </div>
      <div class="current">
        <img :src="`/src/assets/images/weather/${currentWeather?.type}.png`" alt="Weather Icon" class="weather-icon" />
        <div class="temperature">
          {{ weatherData?.data?.wendu }}<span>°C</span>
        </div>
        <div class="conditions">
          <div class="weather-type">{{ currentWeather?.type }}</div>
          <div class="weather-tip">{{ weatherData?.data?.ganmao }}</div>
        </div>
      </div>
    </div>
  </div>

     <dv-border-box12>
      <div dv-bg>
        
      </div>
    </dv-border-box12>

</template>

<script>
export default {
  name: 'WeatherWidget',
  data() {
    return {
      weatherData: null,
      loading: true,
      error: null
    }
  },
  computed: {
    // 获取当前天气（今天）
    currentWeather() {
      return this.weatherData?.data?.forecast?.[0] || {}
    }
  },
  mounted() {
    this.fetchWeather()
  },
  methods: {
    async fetchWeather() {
      try {
        const response = await fetch('/api/weather/api/weather/city/101280701')
        if (!response.ok) throw new Error('网络响应异常')

        const data = await response.json()
        if (data.status !== 200) throw new Error(data.message || '天气数据获取失败')

        this.weatherData = data
      } catch (err) {
        console.error('获取天气失败:', err)
        this.error = err.message
      } finally {
        this.loading = false
      }
    },


  }
}
</script>

<style scoped>
.weather-container {
  font-family: 'Microsoft YaHei', sans-serif;
  max-width: 100%;
  margin: 0;
  background: transparent;
  border-radius: 8px;
  padding: 15px;
  color: #fff;
}

.weather-card {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 15px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 400px;
  margin: 0 auto;
}
.current {
  width: 300px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.weather-icon {
  width: 60px;
  height: 60px;
}

.location {
  font-size: 14px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.temperature {
  font-size: 24px;
  font-weight: bold;
}

.weather-type {
  font-size: 16px;
  font-weight: 500;
}

.weather-tip {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
}
</style>